<template>
  <div class="lock-state">
    <a-form ref="form" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-form-item :label="`${room.status ? '锁定' : '解锁'}备注`" name="reason">
        <a-textarea v-model:value="formData.reason" :placeholder="rules.reason.message" />
      </a-form-item>
      <div style="padding: 0 0 15px 15px; color: #ff4246">
        提示：{{ room.status ? '锁定' : '解锁' }}后，该房间{{ room.status ? '无法' : '可恢复' }}办理登记！
      </div>
    </a-form>
  </div>
</template>

<script>
import { homestayWarningRoomLock, homestayWarningRoomUnlock } from '@gis/lib/api';
import { handleFormRes } from '@gis/lib/utils/resolver.js';

export default {
  name: 'lock-state',
  props: {
    room: { type: Object, default: () => {} },
  },
  data() {
    return {
      formData: {
        reason: '',
      },
      rules: {
        reason: { required: true, message: '请输入备注' },
      },
    };
  },
  methods: {
    getFormData() {
      return Object.assign({}, this.formData, { room_id: this.room.room_id });
    },
    async onOk() {
      const valid = await this.$refs.form.validate();
      if (!valid) return;
      let paramsData = this.getFormData();
      const api = this.room.status ? homestayWarningRoomLock : homestayWarningRoomUnlock;
      return await handleFormRes(api(paramsData));
    },
  },
};
</script>

<style scoped lang="less">
.lock-state {
  padding: 15px;
}
</style>
